<template>
    <div class="section-wrap teamActivity"
         style="height:100%;">
        <div class="bscroll">
            <vue-better-scroll class="wrapper"
                               ref="scroll0"
                               :scrollbar="scrollbarObj"
                               :pullDownRefresh="pullDownRefreshObj"
                               :pullUpLoad="pullUpLoadObj"
                               :startY="parseInt(startY)"
                               @pullingDown="onPullingDown"
                               @pullingUp="onPullingUp">
                <div class="bscroll-container">
                    <div class="form-section">
                        <tab active-color="#2269ff">
                            <tab-item @on-item-click="$router.push('activityRecord')">
                                <i>活动记录</i>
                            </tab-item>
                            <tab-item selected
                                      @on-item-click="$router.push('activityStatics')">
                                <i>活动统计</i>
                            </tab-item>
                        </tab>
                        <div class="mian_body">
                            <div class="form-item form-item-style1">
                                <div class="label-title">
                                    <label>单位名称</label>
                                </div>
                                <group>
                                    <div class="right-select"
                                         @click="selectType">
                                        {{checkcompany.deptName?checkcompany.deptName:userdepartname}}
                                    </div>
                                    <i class="iconfont icon-jinru rightmsg"></i>
                                </group>
                            </div>
                            <div class="form-item form-item-style1">
                                <div class="label-title">
                                    <label>指标</label>
                                </div>
                                <group>
                                    <div>
                                        <popup-picker :data="tipList"
                                                      v-model="actip"
                                                      placeholder="请选择"
                                                      @on-change="changeTip">
                                        </popup-picker>
                                    </div>
                                </group>
                            </div>
                            <div class="form-item form-item-style1">
                                <div class="label-title">
                                    <label>开始时间</label>
                                </div>
                                <group>
                                    <div>
                                        <datetime format="YYYY-MM-DD"
                                                  v-model="formData.startTime"
                                                  @on-confirm="changeStartTime"></datetime>
                                    </div>
                                </group>
                            </div>
                            <div class="form-item form-item-style1">
                                <div class="label-title">
                                    <label>结束时间</label>
                                </div>
                                <group>
                                    <div>
                                        <datetime format="YYYY-MM-DD"
                                                  v-model="formData.endTime"
                                                  @on-confirm="changeEndTime"></datetime>
                                    </div>
                                </group>
                            </div>
                            <p class="search-btn"
                               @click="getListSearch">查询</p>
                        </div>
                        <!-- <div class="total">数量: {{listAllCount}}</div> -->
                        <div class="cut-off-rule"></div>
                        <no-data v-if="!itemList.length"></no-data>
                        <div v-if="actip=='召开次数'"
                             class="basicMsg">
                            <ul class="staticList-content">
                                <li class="staticListLis"
                                    v-for="(item,index) in itemList"
                                    :key="index">
                                    <div class="staticListFlex_l">{{item.DepartName}}</div>
                                    <div class="actNumWrap">
                                        <div class="fl grayColor">应召开次数:{{item.needTotal}}次</div>
                                        <div class="fl grayColor">实召开次数:{{item.realTotal}}次</div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div v-if="actip=='点赞次数'"
                             class="basicMsg">
                            <ul class="staticList-content">
                                <li class="thrumbsWrap"
                                    v-for="(item,index) in itemList"
                                    :key="index"
                                    @click="gotoDetail(item.ID)">
                                    <div class="thrumbs-l">
                                        <div class="thrumbs-tit">{{item.Name}}</div>
                                        <div class="thrumb-date grayColor">{{item.MeetingDate}}</div>
                                    </div>
                                    <div class="thrumbs-r">
                                        <div class="thrumbs-ico"></div>
                                        <i class="thrumbs-num">{{item.PraiseNum}}</i>
                                        <i class="iconfont icon-jinru rightmsg"></i>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div v-if="actip=='阅读次数'"
                             class="basicMsg">
                            <ul class="staticList-content">
                                <li class="thrumbsWrap"
                                    v-for="(item,index) in itemList"
                                    :key="index"
                                    @click="gotoDetail(item.ID)">
                                    <div class="thrumbs-l">
                                        <div class="thrumbs-tit">{{item.Name}}</div>
                                        <div class="thrumb-date grayColor">{{item.MeetingDate}}</div>
                                    </div>
                                    <div class="thrumbs-r">
                                        <div class="thrumbs-ico2"></div>
                                        <i class="thrumbs-num">{{item.ReadTimes}}</i>
                                        <i class="iconfont icon-jinru rightmsg"></i>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </vue-better-scroll>
        </div>
        <activityCompany :selectCompany="selectCompany"
                         :companyPropShow="companyPropShow"></activityCompany>
        <myMenu></myMenu>
    </div>
</template>

<script>
import activityCompany from '@/commonComponents/activityCompany'
import { Tab, TabItem, PopupRadio, Datetime } from 'vux'
import myMenu from '@/commonComponents/menu'
import noData from '@/commonComponents/noData/noData.vue'
import VueBetterScroll from 'vue2-better-scroll'

export default {
    name: 'App',
    data () {
        return {
            formData: {
                startTime: '',
                endTime: ''
            },
            deptCode: '', // 选择的单位code
            itemObj: {},
            itemList: [],
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            listCount: 0, // 当前列表条数
            listAllCount: 0, // 总条数
            pageIndex: 0,
            tipList: [
                ['召开次数', '点赞次数', '阅读次数']
            ], // 指标类型列表
            actip: ['召开次数'], // 选中的指标类型
            userInfo: {}, // 用户信息
            userdepartname: '', // 单位名称
            companyPropShow: false,
            checkcompany: {}
        }
    },
    components: {
        Tab,
        TabItem,
        noData,
        PopupRadio,
        Datetime,
        myMenu,
        VueBetterScroll,
        activityCompany
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
        this.formData.departID = this.userInfo.deptid
        this.userdepartname = this.userInfo.deptname
        this.departsir = this.userInfo.departsir

        this.deptCode = this.userInfo.deptid

        this.formData.startTime = this.getYear() + '-01-01'
        this.formData.endTime = this.getdatenew()

        this.$vux.loading.show({
            text: '加载中...'
        })
        this.onPullingDown()
    },
    methods: {
        // 获取统计列表
        getListData () {
            var params = {
                'allowPaging': true,
                'business': 'getMeetingCountPage',
                'data': {
                    'CreateUserDeptCode': this.deptCode,
                    'EndDate': this.formData.endTime,
                    'Remark': this.actip[0],
                    'StartDate': this.formData.startTime
                },
                'pageIndex': this.pageIndex,
                'pageSize': 20,
                'tokenId': '81ACEFD7ACEE9BCDE572882A244E72B0',
                'userId': this.userInfo.userid
            }
            return this.$axiosAjax.getConfigJson(params)
            // this.$axiosAjax.getConfigJson(params)
            // .then((res) =>{
            //     // console.log(res)
            //     if(res.data.code == 0){
            //         that.itemObj = res.data.data
            //         that.listAllCount = res.data.count
            //         that.$vux.loading.hide()
            //     }else{
            //         that.$vux.toast.text(res.data.info)
            //     }
            // }).catch((response) => {
            //     console.log(response)
            //     that.$vux.loading.hide()
            // })
        },
        // 查询
        getListSearch () {
            this.pageIndex = 0
            this.onPullingDown()
        },
        onPullingDown () {
            // 模拟下拉刷新
            let that = this
            this.itemList = []
            this.getListData().then(res => {
                if (res.data.code === 0) {
                    that.itemObj = res.data.data
                    if (that.actip[0] == '召开次数') {
                        that.itemList = that.itemObj.DF
                        that.listCount = that.itemObj.DF.length
                    } else if (that.actip[0] == '点赞次数') {
                        that.itemList = that.itemObj.PR
                        that.listCount = that.itemObj.PR.length
                    } else if (that.actip[0] == '阅读次数') {
                        that.itemList = that.itemObj.RD
                        that.listCount = that.itemObj.RD.length
                    }
                    that.listAllCount = res.data.count
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        onPullingUp () {
            let that = this
            this.pageIndex++
            // 模拟上拉 加载更多数据
            this.getListData().then(res => {
                if (res.data.code === 0) {
                    let itemArr = []
                    that.itemObj = res.data.data
                    if (that.actip[0] == '召开次数') {
                        itemArr = that.itemObj.DF
                        that.listCount = that.itemObj.DF.length
                    } else if (that.actip[0] == '点赞次数') {
                        itemArr = that.itemObj.PR
                        that.listCount = that.itemObj.PR.length
                    } else if (that.actip[0] == '阅读次数') {
                        itemArr = that.itemObj.RD
                        that.listCount = that.itemObj.RD.length
                    }
                    that.itemList = that.itemList.concat(itemArr)
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        // 选择单位
        selectType () {
            // this.$router.push({
            //     path: '/showActivityCompany',
            //     query: { sourceType: 'activityStatics' }
            // })
            this.companyPropShow = true
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.checkcompany = item
            this.deptCode = this.checkcompany.deptId
        },
        // 切换指标
        changeTip () {
            this.pageIndex = 0
            this.$vux.loading.show({
                text: '加载中...'
            })
            this.onPullingDown()
        },
        // 验证开始和结束时间
        checkTime (startTime, endTime, tip) {
            if (startTime.length > 0 && endTime.length > 0) {
                var startTmp = startTime.split('-')
                var endTmp = endTime.split('-')
                var sd = new Date(startTmp[0], startTmp[1], startTmp[2])
                var ed = new Date(endTmp[0], endTmp[1], endTmp[2])
                if (sd.getTime() > ed.getTime()) {
                    // this.$vux.toast.text("开始日期不能大于结束日期");
                    return false
                }
            }
            return true
        },
        // 切换开始时间
        changeStartTime (val) {
            if (!this.checkTime(val, this.formData.endTime)) {
                this.$set(this.formData, 'endTime', this.formData.startTime)
            }
        },
        // 切换结束时间
        changeEndTime (val) {
            if (!this.checkTime(this.formData.startTime, val)) {
                this.$set(this.formData, 'endTime', this.formData.startTime)
                this.$vux.toast.text('开始日期不能大于结束日期')
            }
        },
        // 获取年份
        getYear () {
            var date = new Date()
            var year = date.getFullYear()
            return year
        },
        // 获取年月日
        getdatenew () {
            var date = new Date()
            var seperator1 = '-'
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var strDate = date.getDate()
            if (month >= 1 && month <= 9) {
                month = '0' + month
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate
            return currentdate
        },
        // 进入统计详情
        gotoDetail (id) {
            this.$router.push({
                path: '/addteamActivity?',
                query: {
                    sourceType: 'edit',
                    id: id
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.form-section {
    // position: fixed;
    // top: 0px;
    // width: 100%;
    // height: 100%;
    // left: 0;
    // overflow: scroll;
    // bottom: 100px;
    .vux-tab-selected {
        i {
            font-size: 15px;
            color: #2269ff;
            font-weight: bold;
        }
    }
    .search-btn {
        width: 200px;
        line-height: 40px;
        border-radius: 20px;
        margin: 23px auto;
        text-align: center;
        color: #fff;
        background: #2269ff;
    }
    .search-btn:hover {
        opacity: 8;
    }
}
//统计分析列表
.static-sectionBox {
    padding-left: 20px;
    background-color: #fff;
    margin-bottom: 20px;
}
.staticList-head {
    display: flex;
    display: -webkit-flex;
    padding: 10px 0;
    border-bottom: 1px solid #efeff4;
    line-height: 30px;
}
.hidden-totalNum {
    width: 108px;
    border-right: 1px solid #efeff4;
    font-size: 14px;
    font-weight: bold;
}
.staticList-head .hidden-cate {
    padding-left: 14px;
    width: 168px;
    font-weight: normal;
}
.redColor {
    color: #f00;
}
.grayColor {
    color: #999;
    font-size: 14px;
}
.greenColor {
    color: #15bd84;
}
.hidden-num {
    flex: 1;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    font-size: 14px;
}
.staticListLis {
    line-height: 27px;
    padding: 14px 0;
    border-bottom: 1px solid #efeff4;
    font-size: 14px;
    color: #999;
}
.staticListLis h4 {
    color: #333;
    font-weight: normal;
    font-size: 14px;
}
.baseDanger {
    margin-right: 48px;
}
.majorDanger {
    margin-right: 48px;
}
.dangerGroup div {
    color: #666;
}
.staticList-content .staticListFlex {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 20px;
}

.staticListFlex_l {
    color: #333;
    font-size: 14px;
}
.actNumWrap {
    overflow: hidden;
}
.actNumWrap > div:nth-child(1) {
    margin-right: 20px;
}
.thrumbsWrap {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding: 20px 20px 20px 0;
}
.thrumbsWrap .thrumbs-tit {
    margin-bottom: 14px;
    color: #333;
}
.thrumbsWrap .thrumbs-l {
    font-size: 14px;
}
.thrumbs-r {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}
.thrumbs-r .thrumbs-ico {
    width: 15px;
    height: 100%;
    background: url('../../../static/images/thrumbs.png') no-repeat left center;
    background-size: 11px 12px;
}
.thrumbs-r .thrumbs-ico2 {
    width: 18px;
    height: 100%;
    background: url('../../../static/images/view.png') no-repeat left center;
    background-size: 15px 18px;
}
.thrumbs-r .thrumbs-num {
    color: #999;
    margin-right: 20px;
}
.bscroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
</style>
<style>
.statisticsGroup .vux-no-group-title {
    margin-top: 0;
}
.statisticsGroup .weui-cells:before {
    display: none;
}
.statisticsGroup .weui-label {
    font-size: 14px;
    font-weight: normal;
    color: #333;
}
.statisticsGroup .vux-cell-value,
.statisticsGroup .vux-popup-picker-placeholder {
    font-size: 14px;
    color: #999;
}
.statisticsGroup .weui-cell_access {
    padding: 15px 24px 15px 0;
}
.statisticsGroup .weui-cell_access .weui-cell__ft::after {
    width: 8px;
    height: 8px;
    border-color: #a1a1a1;
}
.statisticsGroup .dateTit p {
    width: 150px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    color: #333;
}
.statisticsGroup .weui-cells:after {
    display: none;
}
.weui-loading_toast .weui-toast {
    width: 100px;
    min-height: 40px;
    height: 100px;
    top: 280px;
    background: rgba(17, 17, 17, 0.65);
}
.right-select {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    padding-right: 0px;
    height: 20px;
    overflow: hidden;
    width: 228px;
    position: relative;
    line-height: 20px;
    margin-right: -5px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-jinru {
    margin-right: 0px;
    color: #c8c8cd;
    cursor: pointer;
}
.teamActivity .total {
    line-height: 40px;
    font-size: 14px;
    color: #999;
    text-align: right;
    padding-right: 20px;
    background: #ebeef2;
    border-bottom: 1px solid #ebeef3;
}
.teamActivity .vux-cell-value {
    color: #999;
}
.teamActivity .mian_body {
    border-top: 5px solid #ebeef2;
    overflow: hidden;
}
</style>
